<!-- <template>
  <div :class="panelType">
    <div>
      <h3>
        <slot name="title">
          default title
        </slot>
      </h3>
    </div>
    <div>
      <slot name="body"></slot>
      <p>
        <slot name="category"></slot>
      </p>
    </div>
    <div v-if="hasFooterSlot">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    active: true,
    type: {
      type: String,
      default: 'default'
    }
  },
  computed: {
    panelType() {
      return `panel-${this.type}`
    },
    hasFooterSlot() {
      return this.$slots[`footer`]
    }
  }
}
</script> -->
<template>
  <div>
    <h1>Panel with footer</h1>
    <PanelComponent>
      lorem ipsum
      <template #footer>
        <FooterComponent>Some Footer Content</FooterComponent>
      </template>
    </PanelComponent>
    <h1>Panel with footer</h1>
    <PanelComponent>
      lorem ipsum
    </PanelComponent>
  </div>
</template>
<script>
import FooterComponent from './FooterComponent.vue';
import PanelComponent from './PanelComponent.vue';

export default {
  components: {
    FooterComponent, PanelComponent
  }
}
</script>